<template>
	<view>
		<block v-if="detail != null">
			<view class="padding-horizontal-main padding-top-main">
				<!-- 地址 -->
				<view
					v-if="(detail.order_model == 0 || detail.order_model == 2) && (detail.orderAddress || null) != null"
					class="address bg-white padding-horizontal-main padding-top-main border-radius-main spacing-mb">
					<view class="address-base oh">
						<text v-if="(detail.orderAddress.name || null) != null"
							class="address-alias round br-main cr-main bg-white margin-right-sm">{{detail.orderAddress.name}}</text>
						<text class="fr">{{detail.orderAddress.tel}}</text>
					</view>
					<view class="address-detail oh margin-bottom-main">
						<view class="text fr">
							<text>{{detail.orderAddress.provinceName}}{{detail.orderAddress.cityName}}{{detail.orderAddress.countyName}}{{detail.orderAddress.address}}</text>
							<!-- <text
								v-if="detail.order_model == 2 && (detail.address_data.lng || 0) != 0 && (detail.address_data.lat || 0 && detail.address_data.lng != 0 && detail.address_data.lat != 0) != 0"
								class="address-map-submit cr-base br round bg-white margin-left-sm text-size-xs"
								@tap="address_map_event">查看位置</text> -->
						</view>
					</view>
					<view class="address-divider spacing-mb"></view>
				</view>
				<!-- 商品列表 -->
				<view class="goods bg-white padding-main border-radius-main spacing-mb">
					<view class="br-b padding-bottom-main fw-b text-size">商品信息</view>
					<view v-for="(item, index) in detail.items" :key="index"
						class="goods-item br-b-dashed oh padding-main">
						<navigator :url="item.goods_url" hover-class="none">
							<image class="goods-image fl radius" :src="item.images" mode="aspectFill"></image>
							<view class="goods-base pr">
								<view class="multi-text">{{item.title == '' ? "" : item.title}}</view>
								<view v-if="item.spec != null" class="margin-top-sm">
									<block v-for="(sv, si) in item.spec" :key="si">
										<text v-if="si > 0" class="cr-grey padding-left-xs padding-right-xs">;</text>
										<text class="cr-gray">{{sv.value}}</text>
									</block>
								</view>
								<view
									v-if="detail.is_can_launch_aftersale == 1 && (item.orderaftersale_btn_text || null) != null"
									class="orderaftersale-btn-text cr-blue pa bg-white" @tap.stop="orderaftersale_event"
									:data-oid="detail.id" :data-did="item.id">{{item.orderaftersale_btn_text}}</view>
							</view>
						</navigator>
					</view>
					<view class="padding-top-main tr cr-base text-size">
						<!-- <text>共<text class="fw-b">{{detail.buy_number_count}}</text>件 合计 <text class="sales-price margin-right-xs">{{detail.currency_data.currency_symbol}}{{detail.total_price}}</text>元</text> -->
						<text>共<text class="fw-b">{{detail.buy_number_count}}</text>件 合计 <text
								class="sales-price margin-right-xs">{{detail.total_price}}</text>元</text>
					</view>
				</view>
				<!-- 物流信息 -->
				<view v-if="orderStatus === '待收货'" class="logistics-info-btn">
					<view class="" @click="open">查看物流信息</view>
				</view>

				<!-- 虚拟销售数据 -->
				<view v-if="(site_fictitious || null) != null"
					class="site-fictitious panel-item padding-horizontal-main padding-top-main border-radius-main bg-white spacing-mb">
					<view class="br-b padding-bottom-main fw-b text-size">{{site_fictitious.title || '密钥信息'}}</view>
					<view class="panel-content oh padding-top-main">
						<view v-if="(site_fictitious.tips || null) != null"
							class="tips-value radius padding-main margin-bottom-main">
							<mp-html :content="site_fictitious.tips" />
						</view>
						<view v-for="(item, index) in detail.items" :key="index"
							class="item br-b-dashed oh padding-bottom-main margin-bottom-main">
							<image class="left-image br fl radius" :src="item.images" mode="aspectFill"></image>
							<view class="right-value fr">
								<mp-html v-if="(item.fictitious_goods_value || null) != null"
									:content="item.fictitious_goods_value" />
								<text v-else class="cr-gray">未配置数据</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 自提信息 -->
				<view v-if="(detail.extraction_data || null) != null"
					class="site-extraction panel-item padding-main border-radius-main bg-white spacing-mb">
					<view class="br-b padding-bottom-main fw-b text-size">取货信息</view>
					<view class="panel-content oh padding-top-main">
						<view>
							<text>取货码：</text>
							<text
								class="radius bg-green cr-white padding-left-sm padding-right-sm">{{detail.extraction_data.code || '取货码不存在、请联系管理员'}}</text>
						</view>
						<image v-if="(detail.extraction_data.images || null) != null"
							class="qrcode br radius margin-top-lg" :src="detail.extraction_data.images"
							mode="aspectFill"></image>
					</view>
				</view>

				<!-- 订单基础数据 -->
				<view v-if="detail_list.length > 0"
					class="panel-item padding-main border-radius-main bg-white spacing-mb">
					<view class="br-b padding-bottom-main fw-b text-size">订单信息</view>
					<view class="panel-content oh">
						<view v-for="(item, index) in detail_list" :key="index"
							class="item br-b oh padding-vertical-main">
							<view class="title fl padding-right-main cr-gray">{{item.name}}</view>
							<view class="content fl br-l padding-left-main">{{item.value}}</view>
						</view>
					</view>
				</view>
				<!-- 扩展数据 -->
				<view v-if="extension_data.length > 0"
					class="panel-item padding-main border-radius-main bg-white spacing-mb">
					<view class="br-b padding-bottom-main fw-b text-size">扩展数据</view>
					<view class="panel-content oh">
						<view v-for="(item, index) in extension_data" :key="index"
							class="item br-b oh padding-vertical-main">
							<view class="title fl padding-right-main cr-gray">{{item.name}}</view>
							<view class="content fl br-l padding-left-main">{{item.tips}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 结尾 -->
			<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
		</block>
		<!-- 按钮 -->
		<view class="btn_list">
			<view class="btn_item" v-if="roleName == '业务经理' && detail.status_name == '待确认'" @click="confirmed_envent">待确认</view>
			<view class="btn_item" v-if="roleName == '业务经理' && (detail.status_name == '备货中' || detail.status_name == '已接单')" @click="bind_envent">绑定结算单</view>
			<view class="btn_item" v-if="isManager === '0' && detail.status_name != '待确认'" @click="check_envent">查看结算单</view>
		</view>
		<!-- 结算单 -->
		<uni-popup ref="basePopup" type="center" border-radius="10px 10px 0 0" :mask-click="false">
			<view class="base_popup">
				<view class="close-btn" @click="$refs.basePopup.close()">×</view>
				<view v-if="loading" class="loading">加载中...</view>
				<image v-else :src="statement" mode="widthFix" @click="previewImage(statement)"></image>
			</view>
		</uni-popup>
		<!-- 物流信息 -->
		<uni-popup ref="flowPopup" type="center" border-radius="10px 10px 0 0" :mask-click="false">
			<view class="flow_popup">
				<view class="flow_popup_info">
					<view class=""></view>
					<view class="flow_popup_title">物流信息</view>
					<view class="flow_popup_close" @click="close">X</view>
				</view>
				<view class="flow_popup_list">
					<view class="flow_popup_item">快递单号：12345854546</view>
					<view class="flow_popup_item">快递类型：顺丰快递</view>
					<view class="flow_popup_item">快递状态：运输中...</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	import componentBottomLine from "../../components/bottom-line/bottom-line.vue";

	export default {
		data() {
			return {
				params: null,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				data_bottom_line_status: false,
				detail: null,
				detail_list: [],
				extension_data: [],
				// 自定义分享信息
				share_info: {},
				site_fictitious: null,
				entryTime: 0,
				orderStatus: '',
				roleName: null,
				balanceCode: null,
				statement: '',
				loading: false,
				isManager: null
			};
		},
		components: {
			componentBottomLine
		},
		onLoad(params) {
			if (typeof(params) != 'undefined') {
				var numberId = params.numberId || '';
				if (numberId != '') {
					uni.clearStorageSync();
					app.globalData.data.numberId = numberId;
				}
			}
			this.params = params;
			this.isManager = params.isManager;
			this.init();;
		},
		// 分享朋友
		onShareAppMessage(res) {
			return {
				title: app.globalData.data.tenantName,
				path: "pages/user_order_detail/user_order_detail?numberId=" + app.globalData.data.numberId,
				mpId: app.globalData.data.appid
			}
		},
		// 分享朋友圈
		// onShareTimeline(res) {
		// 	return {
		// 		title: app.globalData.data.tenantName,
		// 		type: 0,
		// 		summary: ""
		// 	}
		// },

		onShow() {
			// 数据加载
			this.get_data();
			// 记录用户进来时间
			this.entryTime = Date.now();
		},
		onUnload() {
			this.OnEntryTime();
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.get_data();
		},
		watch: {
			'detail_list': function(newList) {
				this.orderStatus = newList.find(item => item.name === "订单状态").value;
			}
		},
		methods: {
			open() {
				this.$refs.flowPopup.open('center');
			},
			close() {
				this.$refs.flowPopup.close()
			},
			init(e) {
				var user = app.globalData.get_user_info(this, "init", "");
				if (user != false) {
					// 用户未绑定用户则转到登录页面
					if (app.globalData.user_is_need_login(user)) {
						uni.navigateTo({
							url: "/pages/login/login?event_callback=init"
						})
					} else {
						// this.get_data();
						this.roleName = user.roleName;
					}
				}
			},
			OnEntryTime() {
				var radarlog_data = {
					pageUrl: "pages/user_order_detail/user_order_detail",
					name: "订单详情页",
					remark: "订单详情页停留时间",
					entryTime: this.entryTime,
				}
				uni.request({
					url: app.globalData.get_request_url("radarlog/add"),
					data: radarlog_data,
					method: "POST",
					success: (res) => {
						console.log(res, "订单详情页停留时间");
					}
				})
			},
			// 获取数据
			get_data() {
				var self = this;
				uni.showLoading({
					title: '加载中...'
				});
				self.data_list_loding_status = 1
				var order_id = self.params.id;
				let url = app.globalData.get_request_url("order/detail");
				uni.request({
					url: url,
					method: 'POST',
					data: {
						id: order_id
					},
					dataType: 'json',
					success: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						if (res.data.code == 200) {
							var data = res.data;
							self.detail = data.data;
							self.detail_list = [{
									name: "会员号码",
									value: data.data.membership_no || ''
								},
								{
									name: "出货服务",
									value: data.data.warehouse_name || ''
								},
								{
									name: "订单模式",
									value: data.data.order_model_name || ''
								},
								{
									name: "订单编号",
									value: data.data.order_no || ''
								},
								{
									name: "订单状态",
									value: data.data.status_name || ''
								},
								{
									name: "订单类型",
									value: data.data.system_type || ''
								},
								{
									name: "支付状态",
									value: data.data.pay_status_name || ''
								},
								{
									name: "订单单价",
									value: data.data.price || ''
								},
								{
									name: "订单总价",
									value: data.data.total_price || ''
								},
								{
									name: "优惠金额",
									value: data.data.preferential_price || ''
								},
								{
									name: "增加金额",
									value: data.data.increase_price || ''
								},
								{
									name: "支付金额",
									value: data.data.pay_price || ''
								},
								{
									name: "支付方式",
									value: (data.data.payment_name || '') + (((data.data
											.is_under_line_text || null) == null || (
											data.data.payment_name || null) == null) ? '' :
										'（' + data.data.is_under_line_text + '）')
								},
								{
									name: "快递公司",
									value: data.data.express_name || ''
								},
								{
									name: "快递单号",
									value: data.data.express_number || ''
								},
								{
									name: "用户留言",
									value: data.data.user_note || ''
								},
								{
									name: "创建时间",
									value: data.data.add_time || ''
								},
								{
									name: "确认时间",
									value: data.data.confirm_time || ''
								},
								{
									name: "支付时间",
									value: data.data.pay_time || ''
								},
								{
									name: "发货时间",
									value: data.data.delivery_time || ''
								},
								{
									name: "收货时间",
									value: data.data.collect_time || ''
								},
								{
									name: "取消时间",
									value: data.data.cancel_time || ''
								},
								{
									name: "关闭时间",
									value: data.data.close_time || ''
								},
							];
							self.extension_data = data.data.extension_data || []
							self.site_fictitious = data.site_fictitious || null;
							self.data_list_loding_status = 3;
							self.data_bottom_line_status = true;
							self.data_list_loding_msg = '';
						} else {
							self.data_list_loding_status = 2;
							self.data_bottom_line_status = false;
							self.data_list_loding_msg = res.data.msg;
							// if (app.globalData.is_login_check(res.data, self, 'init')) {
							// 	app.globalData.showToast(res.data.msg);
							// }
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						self.data_list_loding_status = 2;
						self.data_bottom_line_status = false;
						self.data_list_loding_msg = '服务器请求出错'
						uni.showToast({
							title: "服务器请求出错"
						})
					}
				});
			},
			// 待确认订单
			confirmed_envent() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要接此订单吗?',
					confirmText: '确认',
					cancelText: '不了',
					success: result => {
						if (result.confirm) {
							var id = this.detail.id
							uni.showLoading({
								title: '处理中...'
							});
							let url = app.globalData.data.request_admin_url + 'order/storeOrder/takeorders/' +
								id
							uni.request({
								url: url,
								method: 'POST',
								dataType: 'json',
								header: {
									'Authorization': 'Bearer ' + app.globalData.data.admin_token
								},
								success: res => {
									uni.hideLoading();
									if (res.data.code == 200) {
										var data = res.data.data;
										var temp_data_list = this.detail;
										temp_data_list['status'] = 9;
										temp_data_list['status_name'] = '备货中';
										this.detail = temp_data_list;
										this.detail_list = this.detail_list.map(item => {
											if (item.name === "订单状态") {
												return {
													...item,
													value: "备货中"
												};
											}
											return item;
										});
										uni.showToast({
											title: "确认成功"
										})
									} else {
										uni.showToast({
											title: res.data.msg
										})
									}
								},
								fail: () => {
									uni.hideLoading();
									uni.showToast({
										title: "服务器请求出错"
									})
								}
							});
						}
					}
				});
			},
			// 绑定结算单
			bind_envent() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要绑定此订单吗?',
					confirmText: '确认',
					cancelText: '不了',
					success: result => {
						if (result.confirm) {
							uni.showModal({
								title: '请输入结算单号',
								editable: true,
								placeholderText: '请输入结算单号',
								confirmText: '提交',
								cancelText: '取消',
								success: inputResult => {
									if (inputResult.confirm) {
										this.balanceCode = inputResult.content;
										if (!this.balanceCode) {
											uni.showToast({
												title: '结算单号不能为空',
												icon: "none"
											});
											return;
										}
										var storeOrderId = this.detail.id;
										uni.showLoading({
											title: '处理中...'
										});
										let url = app.globalData.data.request_admin_url +
											'order/storeOrder/balance/';
										var post_data = {
											storeOrderId: storeOrderId,
											balanceCode: this.balanceCode
										}
										uni.request({
											url: url,
											method: 'POST',
											data: post_data,
											dataType: 'json',
											header: {
												'Authorization': 'Bearer ' + app.globalData
													.data.admin_token
											},
											success: res => {
												uni.hideLoading();
												if (res.data.code == 200) {
													var data = res.data.data;
													var temp_data_list = this.detail;
													temp_data_list['status'] = 13;
													temp_data_list['status_name'] =
														'已完成';
													this.detail = temp_data_list;
													this.detail_list = this.detail_list
														.map(item => {
															if (item.name ===
																"订单状态") {
																return {
																	...item,
																	value: "已完成"
																};
															}
															return item;
														});
													uni.showToast({
														title: "绑定成功"
													});
												} else {
													uni.showToast({
														title: res.data.msg
													});
												}
											},
											fail: () => {
												uni.hideLoading();
												uni.showToast({
													title: "服务器请求出错"
												});
											}
										});
									}
								}
							});
						}
					}
				});
			},
			// 查看结算单
			check_envent() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要查看结算单吗?',
					confirmText: '确认',
					cancelText: '不了',
					success: result => {
						if (result.confirm) {
							uni.showModal({
								title: '请输入结算单号',
								editable: true,
								placeholderText: '请输入结算单号',
								confirmText: '提交',
								cancelText: '取消',
								success: inputResult => {
									if (inputResult.confirm) {
										this.balanceCode = inputResult.content;
										if (!this.balanceCode) {
											uni.showToast({
												title: '结算单号不能为空',
												icon: "none"
											});
											return;
										}

										this.loading = true;
										uni.showLoading({
											title: '处理中...'
										});

										let url = app.globalData.data.request_admin_url +
											'order/storeOrder/statement_image/' + this.balanceCode;
										uni.request({
											url: url,
											method: 'GET',
											dataType: 'json',
											header: {
												'Authorization': 'Bearer ' + app.globalData
													.data.admin_token
											},
											success: res => {
												uni.hideLoading();
												this.loading = false;
												if (res.data.code == 200) {
													this.statement = res.data.msg;
									
													this.$nextTick(() => {
														this.$refs.basePopup
															.open('center');
													});
												} else {
													uni.showToast({
														title: res.data.msg,
														icon: "none"
													});
												}
											},
											fail: () => {
												uni.hideLoading();
												this.loading = false;
												uni.showToast({
													title: "服务器请求出错",
													icon: "none"
												});
											}
										});
									}
								}
							});
						}
					}
				});
			},
			// 点击预览结算单
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					current: 0,
					success: () => {
						this.loading = false;
						console.log('图片预览成功');
					},
					fail: (err) => {
						this.loading = false;
						uni.showToast({
							title: '图片预览失败',
							icon: 'none'
						});
					}
				});
			},
			// 售后订单事件
			orderaftersale_event(e) {
				var oid = e.currentTarget.dataset.oid || 0;
				var did = e.currentTarget.dataset.did || 0;
				if (oid == 0 || did == 0) {
					uni.showToast({
						title: "参数有误"
					})
					return false;
				}

				// // 进入售后页面
				// uni.navigateTo({
				// 	url: "/pages/user-orderaftersale-detail/user-orderaftersale-detail?oid=" + oid + "&did=" + did
				// });
			},

			// 地图查看
			address_map_event(e) {
				if ((this.detail.address_data || null) == null) {
					uni.showToast({
						title: "地址有误"
					})
					return false;
				}

				// 打开地图
				var data = this.detail.address_data;
				var name = data.alias || data.name || '';
				var address = (data.province_name || '') + (data.city_name || '') + (data.county_name || '') + (data
					.address || '');
				// app.globalData.open_location(data.lng, data.lat, name, address);
			}
		}
	};
</script>

<style>
	@import url("user_order_detail.css");
</style>